import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get/get_core/src/get_main.dart';
import 'package:zootix/util/zt_screen_adaper_util.dart';
import 'package:zootix/zt_app_theme.dart';

class ParkPage extends StatelessWidget {
  ParkPage({super.key});
  Map<String, Map<String, Color>> animalColor = {
    'Elephant': {
      'default': Color.fromRGBO(167, 237, 21, 1),
      'deep': Color.fromRGBO(121, 173, 10, 1)
    },
    'Deer': {'default': Color(0xFFFFC8D7), 'deep': Color(0xFFFFA4BC)},
    'Raccoon': {'default': Color(0xFF9BF3FF), 'deep': Color(0xFF5CDEEF)},
    'Swan': {'default': Color(0xFFFEB6FF), 'deep': Color(0xFFF77FF9)},
    'Squirrel': {
      'default': Color.fromRGBO(255, 213, 105, 1),
      'deep': Color.fromRGBO(243, 192, 61, 1)
    },
  };
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        constraints: BoxConstraints.expand(),
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/park_bg.png'),
            fit: BoxFit.cover,
          ),
        ),
        child: _buildBody(),
      ),
    );
  }

  Widget _buildBody() {
    return SafeArea(
        child: SingleChildScrollView(
            child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Row(
          children: [
            Padding(
                padding: EdgeInsets.symmetric(
                    horizontal: ZtScreenAdaper.width(20),
                    vertical: ZtScreenAdaper.height(20)),
                child: Text(
                  'Park',
                  style: TextStyle(
                      fontSize: ZtScreenAdaper.sp(25),
                      fontStyle: FontStyle.italic,
                      color: Colors.black,
                      fontWeight: FontWeight.bold),
                )),
          ],
        ),
        _buildAnimalCard(title: 'Elephant', imgPosition: 'left'),
        _buildAnimalCard(title: 'Deer', imgPosition: 'right'),
        _buildAnimalCard(title: 'Raccoon', imgPosition: 'left'),
        _buildAnimalCard(title: 'Swan', imgPosition: 'right'),
        _buildAnimalCard(title: 'Squirrel', imgPosition: 'left'),
      ],
    )));
  }

  Widget _buildAnimalCard(
      {required String title, required String imgPosition}) {
    Widget card;
    if (imgPosition == 'left') {
      card = Container(
        height: ZtScreenAdaper.height(200),
        width: ZtScreenAdaper.screenWidth(),
        child: Stack(
          alignment: Alignment.center,
          children: [
            Positioned(
                bottom: ZtScreenAdaper.height(10),
                child: Container(
                  height: ZtScreenAdaper.height(150),
                  width:
                      ZtScreenAdaper.screenWidth() - ZtScreenAdaper.width(50),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(ZtScreenAdaper.sp(20)),
                      topRight: Radius.circular(ZtScreenAdaper.sp(70)),
                      bottomLeft: Radius.circular(ZtScreenAdaper.sp(20)),
                      bottomRight: Radius.circular(ZtScreenAdaper.sp(20)),
                    ),
                    image: DecorationImage(
                      image: AssetImage(
                          'assets/images/${title.toLowerCase()}_card_bg.png'),
                      fit: BoxFit.cover,
                    ),
                  ),
                )),
            Positioned(
                top: ZtScreenAdaper.height(130),
                left: ZtScreenAdaper.width(60),
                child: ClipOval(
                  child: Container(
                    width: 100,
                    height: 50,
                    color: animalColor[title]!['default'],
                    child: Center(
                      child: ClipOval(
                        child: Container(
                          width: 80,
                          height: 40,
                          color: animalColor[title]!['deep'],
                        ),
                      ),
                    ),
                  ),
                )),
            Positioned(
                top: ZtScreenAdaper.height(0),
                left: ZtScreenAdaper.width(30),
                child: Image(
                  image: AssetImage(
                      'assets/images/${title.toLowerCase()}_photo.png'),
                  fit: BoxFit.fitHeight,
                  height: ZtScreenAdaper.height(180),
                )),
            Positioned(
                top: ZtScreenAdaper.height(90),
                right: ZtScreenAdaper.width(60),
                child: Stack(
                  children: [
                    Positioned(
                      right: 0,
                      child: Image(
                          image: AssetImage(
                              'assets/images/${title.toLowerCase()}_smile.png')),
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Text(
                          title,
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: ZtScreenAdaper.sp(20),
                              fontStyle: FontStyle.italic),
                        ),
                        SizedBox(
                          height: ZtScreenAdaper.height(10),
                        ),
                        Text(
                          'Welcome to ${title} Park.',
                          style: TextStyle(
                            fontSize: ZtScreenAdaper.sp(13),
                          ),
                        ),
                      ],
                    )
                  ],
                )),
            Positioned(
                right: ZtScreenAdaper.width(10),
                bottom: 0,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Image(
                      height: ZtScreenAdaper.width(50),
                      width: ZtScreenAdaper.width(50),
                      image: AssetImage(
                          'assets/images/${title.toLowerCase()}_flower.png'),
                    ),
                    Image(
                        height: ZtScreenAdaper.width(25),
                        width: ZtScreenAdaper.width(25),
                        image: AssetImage(
                            'assets/images/${title.toLowerCase()}_navigate.png'))
                  ],
                )),
          ],
        ),
      );
    } else {
      card = Container(
        height: ZtScreenAdaper.height(200),
        width: ZtScreenAdaper.screenWidth(),
        child: Stack(
          alignment: Alignment.center,
          children: [
            Positioned(
                bottom: ZtScreenAdaper.height(10),
                child: Container(
                  height: ZtScreenAdaper.height(150),
                  width:
                      ZtScreenAdaper.screenWidth() - ZtScreenAdaper.width(50),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(ZtScreenAdaper.sp(70)),
                      topRight: Radius.circular(ZtScreenAdaper.sp(20)),
                      bottomLeft: Radius.circular(ZtScreenAdaper.sp(20)),
                      bottomRight: Radius.circular(ZtScreenAdaper.sp(20)),
                    ),
                    image: DecorationImage(
                      image: AssetImage(
                          'assets/images/${title.toLowerCase()}_card_bg.png'),
                      fit: BoxFit.cover,
                    ),
                  ),
                )),
            Positioned(
                top: ZtScreenAdaper.height(130),
                right: ZtScreenAdaper.width(60),
                child: ClipOval(
                  child: Container(
                    width: 100,
                    height: 50,
                    color: animalColor[title]!['default'],
                    child: Center(
                      child: ClipOval(
                        child: Container(
                          width: 80,
                          height: 40,
                          color: animalColor[title]!['deep'],
                        ),
                      ),
                    ),
                  ),
                )),
            Positioned(
                top: ZtScreenAdaper.height(0),
                right: ZtScreenAdaper.width(30),
                child: Image(
                  image: AssetImage(
                      'assets/images/${title.toLowerCase()}_photo.png'),
                  fit: BoxFit.fitHeight,
                  height: ZtScreenAdaper.height(180),
                )),
            Positioned(
                top: ZtScreenAdaper.height(90),
                left: ZtScreenAdaper.width(60),
                child: Stack(
                  children: [
                    Positioned(
                      left: 0,
                      child: Image(
                          image: AssetImage(
                              'assets/images/${title.toLowerCase()}_smile.png')),
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          title,
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: ZtScreenAdaper.sp(20),
                              fontStyle: FontStyle.italic),
                        ),
                        SizedBox(
                          height: ZtScreenAdaper.height(10),
                        ),
                        Text(
                          'Welcome to ${title} Park.',
                          style: TextStyle(
                            fontSize: ZtScreenAdaper.sp(13),
                          ),
                        ),
                      ],
                    )
                  ],
                )),
            Positioned(
                left: ZtScreenAdaper.width(10),
                bottom: 0,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Image(
                      height: ZtScreenAdaper.width(50),
                      width: ZtScreenAdaper.width(50),
                      image: AssetImage(
                          'assets/images/${title.toLowerCase()}_flower.png'),
                    ),
                    Image(
                        height: ZtScreenAdaper.width(25),
                        width: ZtScreenAdaper.width(25),
                        image: AssetImage(
                            'assets/images/${title.toLowerCase()}_navigate.png'))
                  ],
                )),
          ],
        ),
      );
    }
    return InkWell(
      child: card,
      onTap: () {
        Get.toNamed('rank', arguments: {'title': title});
      },
    );
  }
}
